<script setup lang="ts">
import AMapLoader from '@amap/amap-jsapi-loader'
import { tryit } from 'radash'

let map: AMap.Map | null = null
const mapOption = {
  key: import.meta.env.VITE_AMAP_KEY,
  version: '2.0',
  plugins: ['AMap.Scale'],
}
onMounted(async () => {
  window._AMapSecurityConfig = {
    securityJsCode: import.meta.env.VITE_AMAP_SECURITY_JS_CODE,
  }
  const [err, AMap] = await tryit(() => AMapLoader.load(mapOption))()
  if (err) {
    console.error(err)
    return
  }
  map = new AMap.Map('container', {
    viewMode: '3D',
    zoom: 11,
    center: [116.397428, 39.90923],
  })
})

onUnmounted(() => {
  map?.destroy()
})
</script>

<template>
  <div id="container"></div>
</template>

<style scoped>
#container {
  width: 100vw;
  height: 100vh;
}
</style>
